/* Global styles */
* {
	margin: 0;
}
body {
	background-color: #EEE;

	font-family: Verdana, sans-serif;
	font-size: 12px;
	color: #444;
}
p { padding: 5px; }
strong { font-weight: bold; }
table td { padding: 5px; }
/* Makes textarea stretch to 100% and unresizable. */
textarea { resize: none; width: 100%; white-space: pre; overflow: auto; }

a:link, a:visited { color: #000; font-weight: bold; }
a:hover, a:active { color: #48F; font-weight: bold; }

ul {
	font-size: 14px; font-weight: bold; text-indent: 0px;
	list-style-position: outside; list-style-type: square;
	color: #48F;
	padding: 3px 16px;
}
/* Here so the text is a different font style to the bullet point */
li span { color: #000; font-weight: normal; }

/* Header */
#header {
	width: 800px;
	margin: 0 auto;

	height: 100px;
	background: url(../images/header_back.png) no-repeat;
}
#header img {
	text-align: center;
	display: block;
	margin: 0 auto;
}


/* Content */
#content {
	width: 800px;
	margin: 0 auto;

	background-color: #FFF;
}


/* Footer */
#footer {
	width: 800px;
	height: 25px;
	margin: 0 auto;

	background-color: #48F;
	background: url(../images/footer_back.png) no-repeat;
}
#footer p { text-align: center; font-weight: bold; color: #FFF; }

/* Content level styles */
.red { color: #F00; }
.textCenter { text-align: center; }
.top0 { font-size: 18px; font-weight: bold; }
.top1 { font-size: 16px; font-weight: bold; }
.top2 { font-size: 14px; font-weight: bold; }

.feature { float: left; width: 180px; min-height: 140px; height: 140px; max-height: 140px; background-color: #DDD; }
.feature:hover, .feature:active, .selected { background-color: #AAA; }
.feature img { text-align: center; display: block; margin: 0 auto; }

.language { display: block; float: left; width: 80px; min-height: 60px; height: 60px; max-height: 60px; background-color: #DDD; margin: 20px 0; }
.language:hover, .language:active, .selected { background-color: #AAA; }
.language img { text-align: center; display: block; margin: 0 auto; padding-bottom: 10px; }

.featurePadding { float: left; width: 130px; min-height: 140px; height: 140px; max-height: 140px; background-color: #DDD; }
.flagPadding { float: left; width: 80px; min-height: 60px; height: 60px; max-height: 60px; background-color: #DDD; margin: 20px 0; }
.progLanguagePadding { float: left; width: 200px; min-height: 60px; height: 60px; max-height: 60px; background-color: #DDD; margin: 20px 0; }


/* Upload related classes. */
#formContainer table { position: relative; top: 10px; left: 10px; }
#formContainer textarea { width: 760px; }

#messageContainer { padding: 20px; }

/* Result related IDs/classes. */
#resultsContainer table { margin: 30px; }
#resultsContainer th { text-align: center; font-weight: bold; color: #48F; padding: 5px; }
#resultsContainer td { text-align: center;}

.topTable table { float: left; width: 300px; }
.header { float: bottom; width: 400px; padding: 20px 0px; font-size: 14px; font-weight: bold; color: #48F;
	margin: 0 auto; text-align: center; }
.classHierarchy { padding: 10px 10px; font-size: 16px; font-weight: bold; color: #48F; float: bottom; }

#areaGraphContainer { padding-top: 20px; width: 760px; height: 300px; }
#pieChartContainer { width: 760px; height: 300px; padding-top: 20px; }

/* Generated using http://www.cssbuttongenerator.com/ */
.button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;

	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777 !important;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;

	/* Hack because the damn button won't centre no matter what I do. */
	position: relative;
	left: 350px;
}.button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}.button:active {
	position:relative;
	top:1px;
}

.smallText {
	font-size: 10px;
}

/* Used by the EasyTooltip script. */
#easyTooltip {
	padding: 5px;
	border: 2px solid #8CF;
	background:#f1f1f1;
	background: #48F;
	color: #FFF;
}